<template>
  <div v-loading="loading" element-loading-text="登录中..." element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.6)" class="login-container">

    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
             label-position="left">
      <!-- 头像区域 -->
      <div v-if="TxStatus" class="avatar-box">
        <img src="@/assets/avatar.png" alt="">
      </div>

      <div class="title-container">
        <h3 class="title">后台管理系统</h3>
      </div>

      <el-form-item prop="name">
        <el-input size="large" ref="mobile" v-model="loginForm.mobile" placeholder="手机号" name="mobile"
                  type="text" tabindex="1" auto-complete="on"/>
      </el-form-item>
      <el-form-item prop="password">
        <el-input size="large" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="密码"
                  name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin"/>
      </el-form-item>
      <div>
        <el-button type="primary" size="large" style="width:100%;margin-bottom:20px;"
                   @click.native.prevent="handleLogin">登录
        </el-button>
      </div>
      <div style="display: flex;justify-content: flex-end;">
        <span style="color:white;font-size: 14px;" @click="toDashboard">预览模式</span>
      </div>
    </el-form>
  </div>
</template>

<script>
import axios from '@/utils/axios.js'
import useAdminStore from '@/store/admin.js'

const adminStore = useAdminStore()
export default {
  name: 'Login',
  data() {
    return {
      // 头像状态
      TxStatus: true,
      loginForm: {
        mobile: '',
        password: ''
      },
      // 登录规则
      loginRules: {
        mobile: [{required: true, trigger: 'blur', message: "请输入手机号"}],
        password: [{required: true, trigger: 'blur', message: "请输入密码"}]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    toDashboard() {
      window.location.href = "/"
    },
    // 登录业务
    handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        // 如果符合验证规则
        if (valid) {
          const {data} = await axios.post("auth/login", this.loginForm)
          console.log(data)
          adminStore.setLogin(data)
          window.location.href = "/"
        } else {
          // this.loading = false
          return false
        }
      })
    },
    // 注册业务
    register() {
      this.$router.push({name: 'register'})
    }
  }
}
</script>

<style lang="scss">
$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: url(@/assets/bg-login01.jpeg);
  background-size: 100% 100%;
  // 头像
  .avatar-box {
    margin: 0 auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid #409eff;
    box-shadow: 0 0 10px #409eff;
    position: relative;
    bottom: 0px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0px 35px 0;
    overflow: hidden;
  }


  .title-container {
    position: relative;

    .title {
      font-size: 30px;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: 500;
    }
  }


}
</style>